<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>降低费率</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
	</head>
	<style type="text/css">
	/*移动端1px下边线*/
	.border{ position: relative; }
	.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color:  #efefef; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
	.banner{height: 2.7rem;background: #0d6fb8;}
	.paybox{height: 2.7rem;width: 1.5rem;font-size: 0.3rem;color: #fff;margin: 0 0.3rem;}
	.paybox img{width: 1.17rem;height: auto;}
	.paybox p{margin-top: 0.1rem;}
	.Receivablesbox{height: 3.42rem;width: 7.15rem;background: #fff;margin: 0.25rem auto;border-radius: 3px;}
	.boxheader{height: 1.1rem;font-size: 0.3rem;}
	.boxheaderlogo{width:3rem;height: 1.1rem;font-size: 0.32rem;}
	.boxheaderlogo img{width: 0.6rem;height: auto;margin:0 0.3rem;}
	.feilv{height: 0.54rem;width: 1.4rem;font-size: 0.24rem;color: #fff;background: #0d6fb8;border-radius: 4px;margin-left: 2.4rem;}
	.boxcont{height:1.4rem;}
	.boxcont1{height: 0.6rem;width:2rem;font-size: 0.3rem;color: #4a4a4a;padding-top: 1rem;padding-left: 0.5rem;}
	.boxcont2{height: 1.4rem;width: 1.2rem; font-size: 0.3rem;color: #4a4a4a;}
	.boxcont2 p{margin-top: 0.2rem;}
	.boxfooter{height: 0.8rem;font-size: 0.15rem;color: #808080;}
	.boxfooter p{margin-left: 0.5rem;}
	.loading{height: 0.4rem;font-size: 0.2rem;color: #808080;display: none;}
	.loading i{animation: myfirst 2s infinite linear;}
	@keyframes myfirst {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
	.sharebox{height: 3.74rem;width: 7.15rem;background: #fff;margin: 0.25rem auto;border-radius: 3px;}
	.shareboxheader{height: 2.5rem;position: relative;}
	.shareboxheader .textbox{width: 3.5rem;height: 0.75rem;position: absolute;left: 0.43rem;top: 0.9rem;font-size: 0.3rem;color: #ffc945;}
	.shareboxheader img{width: 2.44rem;height: auto;position: absolute;top: 0.3rem;left: 4.45rem;}
	.shareboxbottom{height: 1.34rem;background: #fff;position: relative;}
	.shareboxbottom .textbox{width: 4.68rem;height: 0.6rem;position: absolute;left: 0.3rem;top: 0.3rem;font-size: 0.27rem;color: #5f5f5f;}
	.shareboxbottom .buttombox{height: 0.85rem;width: 1.9rem;position: absolute;top: 0.25rem;left: 4.98rem;text-align: center;}
	.buttombox p{font-size: 0.18rem;color: #7e7e7e;}
	.sharesubmit{height: 0.58rem;width: 1.8rem;border-radius:0.25rem;background: #0d6fb8;line-height: 0.58rem;margin-top: 0.05rem;margin-left: 0.1rem;}
	.sharesubmit p{color: #fff;font-size: 0.26rem;}
	.swiper-slide{margin-right: 0px !important;}
	.swiper-pagination{margin-bottom: -12px !important;display: none;}
	</style>
	<body>
		<!--头部header开始-->
		<header class="flex flex-align-center">
			<div class="left flex flex-align-center" onclick="Util.jump('./receivables.html')">
				<img src="img/arrleft.png" alt="" class="arrleft"/>
			</div>
			<div class="title">降低费率</div>
			<div class="right flex flex-pack-center flex-align-center" style="font-size: 0.26rem;" onclick="Util.jump('./myPassageway.html')">
				我的通道
			</div>
		</header><!--头部header结束-->
		<!--banner部分-->
		<div class="banner flex flex-align-center flex-pack-center swiper-container">
			<div class="swiper-wrapper" id="paylist">
			<!--加载支付列表template_paylist-->
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<!--扫码收款box框-->
		<div class="container" id="Receivablesboxlist">
			<!--加载通道列表template_Receivablesboxlist-->
		</div>
		<!--支付方式列表渲染-->
		<script type="text/html" id="template_paylist">
		<%for(var i in data){%>
			<div class="paybox flex flex-align-center flex-pack-center flex-v swiper-slide" data-paytype="<%= data[i].payType %>" data-status="<%= data[i].status %>" onclick="Vim.ChangePayByHome(this)">
				<img src="<%= data[i].icon[1] %>"/>
				<p><%= data[i].name %></p>
			</div>
		<%}%>
		</script>
		<!--通道列表渲染-->
		<script type="text/html" id="template_Receivablesboxlist">
			<%if(data.channels.length != 0){%>
			<%for(var i in data.channels){%>
			<div class="Receivablesbox" >
			<div class="boxheader border flex flex-align-center">
				<div class="boxheaderlogo flex flex-align-center flex-pack-center ">
					<img src="<%= data.channels[i].channelIco %>" alt="" />
					<p><%= data.channels[i].channelName %></p>
				</div>
				<div class="feilv flex flex-align-center flex-pack-center" onclick="Inv.Invitation()">
					<p>降低费率</p>
				</div>
			</div>
			<div class="boxcont flex flex-align-center">
				<div class="boxcont1">
					<p><%= data.channels[i].arrivalDate %></p>
				</div>
				<div class="boxcont2 flex-v flex flex-align-center flex-pack-center">
					<p>费率</p>
					<p><%= data.channels[i].currentRate %>%</p>
				</div>
				<div class="boxcont2 flex-v flex flex-align-center flex-pack-center">
					<p>结算</p>
					<p><%=data.channels[i].costPrice/100 %></p>
				</div>
				<div class="boxcont2 flex-v flex flex-align-center flex-pack-center"style="width: 2.8rem;">
					<p>额度</p>
					<p>单笔<%=data.channels[i].tradeMaxAmt/100 %>元</p>
				</div>
			</div>
			<div class="boxfooter flex flex-align-center">
				<p>(刷卡额度<%=data.channels[i].tradeMinAmt/100 %>-<%=data.channels[i].tradeMaxAmt/100 %>元 运营时间：<%=data.channels[i].tradeStartTime %>-<%=data.channels[i].tradeEndTime %>)</p>
			</div>
		</div>
		<%}%>
		<%}else{%>
			<div class="sharebox">
			<div class="shareboxheader border">
				<div class="textbox">继续邀请好友，享受下级通道购买分成</div>
				<img src="img/left-img_03.png" alt="" />
			</div>
			<div class="shareboxbottom">
				<div class="textbox">
					通道已购买完成，可继续邀请好友，享受更多分润
				</div>
				<div class="buttombox">
					<p>当前邀请人数:<span class="num"> <%= data.invited %></span></p>
					<div class="sharesubmit" onclick="Inv.Invitation()">
						<p>邀请好友</p>
					</div>
				</div>
			</div>
		</div>	
		<%}%>
		</script>
	</body>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/swiper-3.4.2.min.js"></script>
	<script type="text/javascript">
	var Inv = {
		Invitation: function(){ //邀请分享
			Util.jump('http://www.uniao.me/h5/share/shareTemp.html');
	 	},
		Feilv: function(){ //降低费率
				layer.open({
				    content: '请打开App购买通道降费率'
				    ,btn: ['去下载', '不要']
				    ,yes: function(index){
				      Util.jump('http://www.uniao.me/share/downLoadPage.htm?topUserId=2000');
				      layer.close(index);
				    }
				  });
		}
	}
	$(function(){
	//获取支付方式列表方法
	Public.gateway({
		method:'channel.query',
        version:'1.0.2'
	},function(res){
		html = template.render("template_paylist", res);
		$('#paylist').html(html);
		$("div[data-status='0']").hide();
		if($("div[data-status='1']").length>4){
			$('.swiper-pagination').show();
		}
		var swiper = new Swiper('.swiper-container', {
		        pagination: '.swiper-pagination',
		        slidesPerView: 'auto',
		        paginationClickable: true,
		        spaceBetween: 30
   			});
   	//默认拉取加载支付方式列表第一种支付方式
	//var userId = Util.GetQueryString('userid');//获取url传递的userid
	var userId = localStorage.userId;
	var payType = $('.swiper-wrapper').find("div[data-status='1']").first().data('paytype');
	Public.ChangePayByHome({
		method:"product.rate.list",
		userId:userId,
		payTradeWay:payType,
		productType:0,
		version:"1.0.2"
		},function(res){
			html = template.render("template_Receivablesboxlist", res);
			$('#Receivablesboxlist').html(html);
		});
	});
	});
	</script>
</html>
